CSS @page: Prindistiilide kohandamise meisterlikkus globaalsele publikule

Tänapäeva digitaalses maailmas on lihtne unustada prindistiilide olulisust. Ometi on veebisaidi sisu hästi vormindatud ja prindisõbraliku versiooni pakkumine ülioluline ligipääsetavuse ja kasutajakogemuse seisukohast. Erineva taustaga kasutajad võivad eelistada teabe lugemist ja kasutamist võrguühenduseta ning korrektselt stiilitud prindiversioon näitab pühendumust kaasavusele. See põhjalik juhend süveneb CSS-i @page reegli võimsusesse, võimaldades teil luua kohandatud prindipaigutusi, mis sobivad globaalsele publikule.

Miks on prindistiilid olulised

Kuigi elame digiajastul, ei ole vajadus prinditud dokumentide järele kadunud. Mõelge järgmistele stsenaariumidele:

• Hariduslikud materjalid: Õpilased eelistavad sageli õppimiseks ja märkmete tegemiseks prinditud materjale.
• Juriidilised dokumendid: Lepingud, kokkulepped ja juriidiline teave nõuavad sageli prinditud koopiaid.
• Retseptid: Paljud kokad eelistavad köögis prinditud retsepti, vältides ekraani kerimise vaeva määrdunud kätega.
• Reisiteave: Reisijad prindivad mõnikord kaarte, marsruute ja olulisi dokumente võrguühenduseta kasutamiseks, eriti piiratud internetiühendusega piirkondades.
• Ligipääsetavus: Mõnel kasutajal võib olla nägemispuue, mis muudab kohandatud fondisuuruste ja kontrastsusega prinditud teksti lugemise lihtsamaks.

Spetsiaalne prindistiil tagab, et teie sisu esitatakse printimiseks parimas võimalikus vormingus, olenemata kasutaja seadmest või brauserist. Ilma selleta võivad kasutajad printida kogu veebisaidi, sealhulgas navigeerimise, külgribad ja muud elemendid, mis on prinditud dokumendis ebaolulised. See raiskab tinti, paberit ja võib tulemuseks anda segase ja loetamatu väljundi.

CSS @page reegli tutvustus

CSS-i @page reegel võimaldab teil kontrollida prinditud lehekülgede paigutust ja välimust. See pakub mehhanismi lehe veeriste, suuruse, orientatsiooni ja muude prindimeediale omaste omaduste määratlemiseks. @page reegel paigutatakse @media print ploki sisse, et tagada selle stiilide rakendamine ainult printimisel.

Siin on põhisüntaks:

            @media print {
  @page {
    /* CSS omadused prindistiilide jaoks lähevad siia */
  }
}

            

              
                Copy
              
            
          

Olulised @page omadused

@page reegel pakub mitmeid omadusi teie prindipaigutuse kohandamiseks. Uurime mõningaid olulisemaid neist:

1. Suurus

Omadus size määratleb prinditud lehe mõõtmed. Levinud väärtused on:

• auto: Brauser määrab lehe suuruse printeri seadete põhjal.
• A4: Enamikus riikides kasutatav standardne lehesuurus (210mm x 297mm).
• Letter: Ameerika Ühendriikides ja Kanadas kasutatav standardne lehesuurus (8,5 tolli x 11 tolli).
• Legal: Suurem lehesuurus, mida sageli kasutatakse juriidiliste dokumentide jaoks (8,5 tolli x 14 tolli).
• Kohandatud mõõtmed: Lehe laiuse ja kõrguse saate määrata ka ühikutes nagu px, cm või in. Näiteks: size: 20cm 30cm;

Näide: Lehe suuruse seadistamine A4-le:

            @media print {
  @page {
    size: A4;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Pidage meeles, et lehe suuruse standardid on üle maailma erinevad. Kuigi A4 on enamikus piirkondades domineeriv, on Põhja-Ameerikas standardiks Letter. Kaaluge kasutajatele võimaluste pakkumist eelistatud lehe suuruse valimiseks või kasutage auto, et tugineda printeri seadetele.

2. Veeris

Omadus margin kontrollib sisu ja lehe servade vahelist ruumi. Saate määrata individuaalsed veerised lehe üla-, paremale, ala- ja vasakpoolsele küljele või kasutada lühendatud kirjapilti.

• margin: 1in;: Määrab kõik veerised 1 tolli suuruseks.
• margin: 1in 2in;: Määrab ülemise ja alumise veerise 1 tolli ning vasaku ja parema veerise 2 tolli suuruseks.
• margin: 1in 2in 3in;: Määrab ülemise veerise 1 tolli, vasaku ja parema veerise 2 tolli ning alumise veerise 3 tolli suuruseks.
• margin: 1in 2in 3in 4in;: Määrab ülemise, parema, alumise ja vasaku veerise vastavalt 1 tolli, 2 tolli, 3 tolli ja 4 tolli suuruseks.

Näide: Veeriste seadistamine A4 paberile:

            @media print {
  @page {
    size: A4;
    margin: 1cm;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Veeriste suurused võivad mõjutada loetavust, eriti pikkade sõnade või keerukate kirjasüsteemidega keelte puhul. Tagage piisavad veerised, et vältida teksti äralõikamist või kokkusurutud väljanägemist.

3. Orientatsioon

Omadus orientation määrab, kas leht tuleks printida püst- (vertikaalses) või rõhtpaigutuses (horisontaalses).

• portrait: Vaikimisi orientatsioon, kus leht on kõrgem kui lai.
• landscape: Leht on laiem kui kõrge.

Näide: Rõhtpaigutuse sundimine:

            @media print {
  @page {
    size: A4 landscape;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Rõhtpaigutus võib olla kasulik laiade tabelite, diagrammide või piltide kuvamiseks. Orientatsiooni valimisel arvestage sisu paigutuse ja kasutaja vajadustega.

4. Märgid

Omadus marks lisab prinditud lehele lõikemärke ja/või registrimärke. Neid kasutatakse peamiselt professionaalses trükis lehtede lõikamiseks ja joondamiseks.

• crop: Lisab lehe nurkadesse lõikemärgid, mis näitavad, kust paberit lõigata.
• cross: Lisab registrimärgid (väikesed ristid), et aidata joondada erinevaid värvieraldusi.
• none: Märke ei lisata.

Näide: Lõikemärkide lisamine:

            @media print {
  @page {
    size: A4;
    marks: crop;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Omadus marks on peamiselt oluline professionaalseks trükiks ja ei pruugi olla vajalik tavalise veebisisu puhul, mida prinditakse kodu- või kontoriprinteritel.

5. Lõikevaru (Bleed)

Omadus bleed määrab sisu hulga, mis ulatub üle lehe servade. Seda kasutatakse tagamaks, et värvid või pildid ulatuksid pärast lõikamist prinditud lehe servani välja.

Näide: 5mm lõikevaru ala seadistamine:

            @media print {
  @page {
    size: A4;
    bleed: 5mm;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Nagu marks, kasutatakse ka bleed omadust peamiselt professionaalse trüki kontekstis. Kui kavatsete seda kasutada, on oluline oma sisu kujundada lõikevaru silmas pidades.

Enamat kui @page: Prindistiilide täiustamine

Kuigi @page reegel pakub kontrolli lehe paigutuse üle, peate sisu printimiseks optimeerimiseks rakendama ka teisi CSS-stiile. Siin on mõned olulised tehnikad:

1. Ebavajalike elementide peitmine

Eemaldage elemendid, mis on prinditud dokumendis ebaolulised, nagu navigeerimismenüüd, külgribad, reklaamid ja sotsiaalmeedia vidinad. Kasutage nende elementide peitmiseks display: none; omadust @media print ploki sees.

Näide: Navigatsiooni ja külgriba peitmine:

            @media print {
  nav, aside {
    display: none;
  }
}

            

              
                Copy
              
            
          

2. Teksti loetavuse optimeerimine

Reguleerige fondi suurusi, reavahesid ja värve, et parandada loetavust paberil. Kasutage selget ja loetavat fonti, näiteks Arial, Helvetica või Times New Roman.

Näide: Tekstistiilide kohandamine:

            @media print {
  body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
  }
  a {
    color: inherit; /* Eemalda lingi värv */
    text-decoration: none; /* Eemalda allajoonimised */
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Fondivalikud peaksid toetama erinevates keeltes kasutatavaid märgistikke. Veenduge, et valitud font sisaldaks glüüfe kõigi teie sisu märkide jaoks. Näiteks, kui kasutate hiina, jaapani või korea märke, valige spetsiaalselt nende keelte jaoks loodud font.

3. Piltide ja graafika haldamine

Optimeerige pildid ja graafika printimiseks. Kaaluge piltide hallskaala versioonide kasutamist tindi säästmiseks. Kui pildid on olulised, veenduge, et need oleksid piisavalt kõrge resolutsiooniga, et selgelt printida.

Näide: Piltide muutmine hallskaalaks:

            @media print {
  img {
    filter: grayscale(100%);
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Piltide kasutamisel olge teadlik kultuurilistest tundlikkustest. Veenduge, et pildid sobivad mitmekesisele publikule ja vältige kujutisi, mis võiksid olla solvavad või valesti tõlgendatavad.

4. Linkidega tegelemine

Vaikimisi ei pruugi brauserid hüperlinkidega seotud URL-e printida. Saate kasutada CSS-i, et kuvada URL-id linkide kõrval.

Näide: URL-ide kuvamine:

            @media print {
  a[href]:after {
    content: " (" attr(href) ")";
  }
}

            

              
                Copy
              
            
          

5. Tabelite haldamine

Veenduge, et tabelid oleksid printimiseks õigesti vormindatud. Vältige laiu tabeleid, mis võivad ära lõigatud saada. Kasutage CSS-i tabeli äärise, polsterduse ja fondi suuruste kontrollimiseks.

Näide: Tabelite stiilimine printimiseks:

            @media print {
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #000;
    padding: 5px;
  }
}

            

              
                Copy
              
            
          

Globaalsed kaalutlused: Mõned keeled kasutavad paremalt-vasakule tekstisuunda. Veenduge, et teie tabelistiilid käsitleksid paremalt-vasakule paigutusi õigesti.

6. Ebavajalike värvide vältimine

Värviliselt printimine kulutab rohkem tinti. Kaaluge prindistiilide jaoks monokroomse värviskeemi kasutamist, et säästa tinti ja parandada loetavust. Saate selle saavutada, seades teksti värvi mustaks ja taustavärvi valgeks (või väga helehalliks).

Näide: Värvide seadistamine printimiseks:

            @media print {
  body {
    color: #000;
    background-color: #fff;
  }
}

            

              
                Copy
              
            
          

7. Leheküljepiirid

Kasutage omadusi page-break-before, page-break-after ja page-break-inside, et kontrollida, kus leheküljepiirid tekivad. Need omadused aitavad vältida pealkirjade eraldamist nende sisust või tabelite jagamist üle lehekülgede.

• page-break-before: always;: Sunnib leheküljepiiri enne elementi.
• page-break-after: always;: Sunnib leheküljepiiri pärast elementi.
• page-break-inside: avoid;: Püüab vältida leheküljepiiri elemendi sees.

Näide: Leheküljepiiride vältimine tabelite sees ja leheküljepiiri sundimine enne iga uut peatükki:

            @media print {
  table {
    page-break-inside: avoid;
  }
  h2 {
    page-break-before: always;
  }
}

            

              
                Copy
              
            
          

Prindistiilide rakendamine

Prindistiilide rakendamiseks on kaks peamist viisi:

1. Väline stiilileht

Looge eraldi CSS-fail spetsiaalselt prindistiilide jaoks (nt print.css) ja linkige see oma HTML-dokumendiga, kasutades <link> silti atribuudiga media="print".

            <link rel="stylesheet" href="print.css" media="print">
            

              
                Copy
              
            
          

See lähenemine hoiab teie prindistiilid ekraanistiilidest eraldi, muutes teie koodi organiseeritumaks ja hooldatavamaks.

2. Reasisesed stiilid

Manustage oma prindistiilid otse HTML-dokumenti, kasutades <style> silti @media print ploki sees.

            <style>
  @media print {
    /* Print styles go here */
  }
</style>

            

              
                Copy
              
            
          

See lähenemine sobib väikeste projektide jaoks või kui vajate ainult mõnda lihtsat prindistiili. Siiski võib see muuta teie HTML-dokumendi segasemaks, kui teil on suur hulk prindistiile.

Oma prindistiilide testimine

Pärast prindistiili rakendamist on ülioluline seda põhjalikult testida, et veenduda sisu korrektses printimises.

1. Kasutage oma brauseri prindi eelvaadet: Enamikul brauseritel on sisseehitatud prindi eelvaate funktsioon, mis võimaldab teil näha, kuidas teie leht prindituna välja näeb.
2. Printige PDF-i: Kasutage oma brauseri PDF-i printimise võimalust, et luua oma lehest PDF-fail. See võimaldab teil prinditud väljundit lähemalt üle vaadata ja seda teistega jagada.
3. Testige erinevates brauserites ja seadmetes: Prindistiilid võivad erinevate brauserite ja seadmete vahel veidi erineda. Testige oma prindistiili mitmes brauseris ja seadmes, et tagada järjepidevus.
4. Küsige tagasisidet: Paluge erineva taustaga kasutajatel oma sisu printida ja anda tagasisidet loetavuse, paigutuse ja üldise kogemuse kohta.

Ligipääsetavuse kaalutlused

Prindistiilide loomisel on oluline arvestada puuetega kasutajate ligipääsetavusega. Siin on mõned näpunäited:

• Pakkuge piisavat kontrasti: Veenduge, et teksti ja taustavärvide vahel oleks piisav kontrast, et tekst oleks kergesti loetav.
• Kasutage loetavaid fonte: Valige fondid, mida on nägemispuudega kasutajatel lihtne lugeda.
• Vältige värvi kasutamist ainsa teabe edastamise vahendina: Värvipimedusega kasutajad ei pruugi teatud värve eristada. Kasutage teabe edastamiseks alternatiivseid meetodeid, näiteks tekstisilte või sümboleid.
• Pakkuge piltidele alternatiivset teksti: Lisage kõigile piltidele alt atribuudid, et pakkuda alternatiivset teksti kasutajatele, kes pilte ei näe.

Kokkuvõte

Prindistiilide kohandamise meisterlikkus CSS-i @page reegliga on ülioluline positiivse kasutajakogemuse pakkumiseks ja ligipääsetavuse tagamiseks globaalsele publikule. Mõistes erinevaid @page omadusi ja rakendades parimaid tavasid prindistiilimisel, saate luua oma veebisaidi sisust prindisõbralikke versioone, mis on optimeeritud loetavuse, kasutatavuse ja tindi tõhususe jaoks. Pidage meeles oma prindistiile põhjalikult testida ja arvestada kõigi kasutajate ligipääsetavusega.

Nende strateegiate rakendamisega näitate pühendumust pakkuda kõikehõlmavat ja kaasavat kogemust kõigile kasutajatele, olenemata nende eelistatud teabele juurdepääsu viisist. See parandab lõppkokkuvõttes teie veebisaidi kasutatavust ja tugevdab teie brändi mainet globaalsel tasandil.